<template>
       <Col :sm="24" :md="24" :lg="12">
         <div id="myChart"></div>
      </Col>
</template>
  
<style>
   #myChart{
           width:800px;
           height:200px;
           text-align:center;
   }
</style>

<script>  
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default { 
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { 
               text: '黑烟车柱状图',
               left:'38%', 
               textStyle:{color:'#FFF'} 
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            }       ,
        legend: {
                top:'12%', 
                textStyle:{color:'#FFF'} ,
                data:['初审为黑烟车数量','复审为黑烟车数量','终审为黑烟车数量','已审核为黑烟车数量']
        },
        grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
        },
        axisLabel: {
                textStyle: {
                color: '#FFF', 
                }
        },
        xAxis : [
                {
                type : 'category',
                data : ['海八路隧道','广佛新干线','大沥中队','樵丹路','樵高路']
                }
        ],
        yAxis : [
                {
                type : 'value'
                }
        ],
        series : [
                {
                name:'初审为黑烟车数量',
                type:'bar',
                data:[320, 332, 301, 334, 390 ]
                },
                {
                name:'复审为黑烟车数量',
                type:'bar',
                stack: '广告',
                data:[120, 132, 101, 134, 90 ]
                },
                {
                name:'终审为黑烟车数量',
                type:'bar',
                stack: '广告',
                data:[220, 182, 191, 234, 290 ]
                },
                {
                name:'已审核为黑烟车数量',
                type:'bar',
                stack: '广告',
                data:[150, 232, 201, 154, 190 ]
                } 
        ],
        color:['#80FFFF', '#61a0a8', '#d48265', '#91c7ae','#749f83']
        });
    }
  }
}
 
</script>